<%--
  Created by IntelliJ IDEA.
  User: Teacher
  Date: 2023/11/23
  Time: 15:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/bootstrap/css/bootstrap.min.css">
    <style>
        body{
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        .card{
            margin-top: 20vh;
        }
    </style>
    <script src="${pageContext.request.contextPath}/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/jquery/jquery.min.js"></script>
    <script>
        function changeCode(){
            $("#codeImg").prop("src","${pageContext.request.contextPath}/code?_="+new Date().getTime())
        }
        function checkCode(){
            let code = $("#code").val();
            $.ajax({
                method:"get",
                url:"${pageContext.request.contextPath}/checkcode",
                data:{
                    code:code
                },
                success:function (result){
                    console.log(result)
                    $("#msg").css("color",result.sucess?"green":"red").html(result.msg)
                }
            })
        }
    </script>
</head>
<body>
    <div class="card" style="width: 18rem;">
        <form action="${pageContext.request.contextPath}/login" method="post" class="card-body">
            <div class="mb-3">
                <label for="username" class="form-label">登录名</label>
                <input type="text" class="form-control" name="username" id="username">
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">密码</label>
                <input type="text" class="form-control" name="password" id="password">
            </div>
            <div class="mb-3">
                <img id="codeImg" src="${pageContext.request.contextPath}/code" alt="" onclick="changeCode()">
                <input type="text" class="form-control" name="code" id="code"
                       onblur="checkCode()"
                       style="width: 100px;display: inline-block">
                <span id="msg"></span>
            </div>
            <div class="mb-3">
                <input type="submit" class="btn btn-primary" value="登录">
            </div>
        </form>
    </div>
</body>
</html>
